<template>
  <!-- 模板部分保持不变 -->
  <view class="selectArea">
    <uni-popup ref="popup" type="bottom">
     <view class="header">
       <view class="line">
         <view class="header-title">选择省市区</view>
         <view class="close" @click="handleCancel"></view>
       </view>
     </view>
     <!-- 省市区三级联动 -->
     <view class="province-city-area">
       <view class="label-box">
         <view class="label">省份</view>
         <view class="label">城市</view>
         <view class="label">区县</view>
       </view>
       <picker-view
         :value="areaIndex.data"
         indicator-class="picker-view-indicator"
         @change="bindChange"
         @pickstart="handlePickStart"
         mask-class="picker-view-mask"
         class="picker-view"
       >
         <picker-view-column>
           <view
             :class="[
               'item',
               index === areaIndex.data[0] ? 'activeAddress' : '',
             ]"
             v-for="(item, index) in province.data"
             :key="index"
             >{{ item.label }}</view
           >
         </picker-view-column>
         <picker-view-column>
           <view
             :class="[
               'item',
               index === areaIndex.data[1] ? 'activeAddress' : '',
             ]"
             v-for="(item, index) in city.data"
             :key="index"
             >{{ item.label }}</view
           >
         </picker-view-column>
         <picker-view-column>
           <view
             :class="[
               'item',
               index === areaIndex.data[2] ? 'activeAddress' : '',
             ]"
             v-for="(item, index) in area.data"
             :key="index"
             >{{ item.label }}</view
           >
         </picker-view-column>
       </picker-view>
     </view>
     <!-- 底部 -->
     <view class="footer">
       <view class="btn" @click="confirm">确定</view>
     </view>
    </uni-popup>
  </view>
</template>

<script>
import {provinceData} from '@/utils/address/province';
import {cityData} from '@/utils/address/city.js';
import {areaData} from '@/utils/address/area.js';

export default {
  props: {
    provinceName: {
      type: String,
      default: ''
    },
    cityName: {
      type: String,
      default: ''
    },
    countyName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      province: { data: provinceData },
      city: { data: [] },
      area: { data: [] },
      selectedProvince: { data: { label: '北京', value: '11' } },
      selectedCity: { data: { label: '北京市', value: '1101' } },
      selectedArea: { data: { label: '东城区', value: '110101' } },
      areaIndex: { data: [0, 0, 0] },
      chooseType: 'select'
    };
  },
  watch: {
    cityName: {
      handler: function() {
        if (this.provinceName) {
          this.areaIndex.data[0] = this.province.data.findIndex(
            item => item.label === this.provinceName
          );
        }
        if (this.cityName) {
          this.areaIndex.data[1] = cityData[this.areaIndex.data[0]].findIndex(
            item => item.label === this.cityName
          );
        }
        if (this.countyName) {
          this.areaIndex.data[2] = areaData[this.areaIndex.data[0]][this.areaIndex.data[1]].findIndex(
            item => item.label === this.countyName
          );
        }
        this.getList();
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getList() {
      this.city.data = cityData[this.areaIndex.data[0]];
      this.area.data = areaData[this.areaIndex.data[0]][this.areaIndex.data[1]];
    },
    handlePickStart() {
      this.chooseType = 'select';
    },
    bindChange(event) {
      if (this.chooseType === 'click') return;
      
      const newIndex = event.detail.value;
      // 处理省切换
      if (this.areaIndex.data[0] !== newIndex[0]) {
        this.$set(this.city, 'data', cityData[newIndex[0]]);
        this.$set(this.area, 'data', areaData[newIndex[0]][newIndex[1]]);
        this.selectedProvince.data = this.province.data[newIndex[0]];
        newIndex[1] = 0;
        newIndex[2] = 0;
      }
      // 处理市切换
      else if (this.areaIndex.data[1] !== newIndex[1]) {
        this.$set(this.area, 'data', areaData[newIndex[0]][newIndex[1]]);
        newIndex[2] = 0;
      }
      
      this.selectedCity.data = this.city.data[newIndex[1]];
      this.selectedArea.data = this.area.data[newIndex[2]];
      this.$set(this.areaIndex, 'data', newIndex);
    },
    handleOpen() {
      this.$refs.popup.open('bottom');
    },
    handleCancel() {
      this.$refs.popup.close('bottom');
    },
    confirm() {
      this.handleCancel();
      this.$emit('getAreaData', {
        province: this.selectedProvince.data,
        city: this.selectedCity.data,
        area: this.selectedArea.data
      });
    }
  },
  mounted() {
    // 初始化数据
    this.getList();
  }
};
</script>

<style src="./selectArea.scss" lang="scss" scoped></style>